<template>
  <div>
    <!-- 展示区 -->
    <div>
      <h1>{{ userInfo.name }}</h1>
      <h1>{{ userInfo.age }}</h1>
    </div>
    <!-- 表单 -->
    <!-- actions写的是后台地址 -->
    <form>
      <input v-model="name" type="text" placeholder="用户名" />
      <br />
      <input v-model="age" @keyup.13="reset" type="number" placeholder="年龄" />
    </form>
    <button @click="reset">修改</button>
  </div>
</template>

<script>
import { verify } from "./api";
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      name: "",
      age: "",
    };
  },
  methods: {
    ...mapMutations(["setUser"]),
    reset() {
      // 调用mutation里的函数,把一个新对象传过去
      // this.$store.commit("setUser", { name: this.name, age: this.age });
      const data = { name: this.name, age: this.age };
      // this.setUser(data);
      // 发起请求 response响应对象
      verify(data).then((response) => {
        // 发起请求
        if (response.status === 200 && response.data.code) {
          // 把接口返回给数据，更新到vuex里state
          console.log(response.data.data);
          this.setUser(response.data.data);
        }
        console.log(response);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>